<template>
	<view class="main box box-align-center box-pack-center">
		<swiper class="swiper" :autoplay="false" indicator-dots="false" :circular="false" :current="currentTab">
			<swiper-item v-for="(item,index) in imgurl" :key="index" class="box box-align-center box-pack-center">
				<view class="swiper-item">
					<u-image :src="item.videoImg" width="750rpx" height="100%" mode="widthFix" v-if="item.type == 'mp4'" :show-loading="false"
						@click="showVideo(item.url)">
					</u-image>
					<u-image :src="item.url" width="750rpx" height="100%" mode="widthFix" v-else :show-loading="false"
						@click="previewImage(item)">
					</u-image>
					<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa" :show-loading="false" @click="showVideo(item.url)"
						v-if="item.type =='mp4'">
					</u-image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: [],
				currentTab: 0,
			}
		},
		onLoad(opt) {
			let newData = uni.getStorageSync('item');
			this.setTitle()
			this.currentTab = opt.index
			this.imgurl = JSON.parse(newData)
			//console.log(this.imgurl);
		},
		methods: {
			reset(newData){
				this.$nextTick((res => {
					//console.log(this.imgurl.constructor === Array);
				}))
			},
			setTitle() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000'
				})
			},
			previewImage(val) {
				if (val.type == 'jpg' || val.type == 'png') {
					uni.previewImage({
						current: val.url, // 当前显示图片的 http 链接
						urls: this.imgurl.map(res => {
							if (res.type != "mp4") return res.url
						}).filter(i => i && i.trim()) // 需要预览的图片 http 链接列表
					});
				}
			},
			showVideo(url) {
				uni.navigateTo({
					url: `/pageHome/video?url=` + url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		background-color: #000;
		height: 100%;

		.swiper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			position: relative;

			.posa {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>
